<template>
    <div class="gszl-right-con">
        <div class="leijigongshui-title-bg">
            <span>累计供水量</span>
        </div>
        <chart-view class="leijigongshui-chart-content"  :chart-option="LeiJiGongShuiOpt" :auto-resize="true"
            :play-highlight="false" height="102%" />
    </div>
</template>

<script>
import { getLeiJiGongShui } from "@/api/apiPOI";
export default {
    created() {
        this.Getleijigongshui();
    },
    data() {
        return {
            LeiJiGongShuiData: [],
            LeiJiGongShuiOpt: {},
        }
    },
    methods: {
        Getleijigongshui() {
            getLeiJiGongShui().then((res) => {
                this.LeiJiGongShuiData = res.data;
                console.log("累计供水量", this.LeiJiGongShuiData);
                this.LeiJiGongShuiOpt = this.$eChartFn.LeiJiGongShuiLiang(this.LeiJiGongShuiData);
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.gszl-right-con {
    width: 300px;
    height: calc(100vh - 172px);
    // background-color: rgba(123,145,156,0.6);
    background-color: rgba($color: #02203d, $alpha: 0.8);

    .leijigongshui-title-bg {
        width: 266px;
        height: 44px;
        background-image: url("@/assets/gszl/gongshuishuju-title.png");

        span {
            font-family: SourceHanSansCN-Medium;
            font-size: 14px;
            font-weight: normal;
            font-style: italic;
            font-stretch: normal;
            line-height: 16px;
            letter-spacing: 0px;
            color: #ffffff;
            background-image: linear-gradient(to bottom, #fff 30%, #00baff);
            /*  背景线性渐变 */
            background-clip: text;
            -webkit-background-clip: text;
            /* 背景被裁减为文字的前景色 */
            -webkit-text-fill-color: transparent;
            /* 文字填充为透明，优先级比color高。  */
            position: relative;
            top: 10px;
            left: 34px;
        }
    }

    .leijigongshui-chart-content {
        width: 100%;
        height: calc(100% - 44px);
    }
}
</style>